<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <PreviewDialog ref="preview"
                   :calculatorSore="calculatorSore"
                   :describeContent="describeContent"
                   :fields="fields"
                   :medicalCalculatorData="medicalCalculatorData"
                   :type="cntFormulaType"/>
    <div>
      <div style="display: inline-block">
        <el-button icon="el-icon-back" size="small" type="text" @click="goBack">返回</el-button>
      </div>
      <div style="display: inline-block">|</div>
      <div style="display: inline-block;">
        <div style="padding-bottom: 15px;margin-left:10px">
          <span style=" font-family: 'Microsoft YaHei',serif;display: inline-block">回收站</span>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 10px;">
      <el-row>
        <el-col :span="2">
          <el-button size="small"
                     type="success"
                     @click="recoveryKnowledge">恢复公式
          </el-button>
        </el-col>
        <el-col :span="4">
          <el-button size="small"
                     type="danger"
                     @click="emptyTrash">清空回收站
          </el-button>
        </el-col>
        <el-col :span="18">
          <div>
            <div style="width: 430px; float: right">
              <el-input v-model="name"
                        placeholder="请输入名称"
                        @keyup.enter.native="searchEnterFun($event)">
                <i slot="prefix"
                   class="el-input__icon el-icon-search"></i>
                <el-button slot="append"
                           :icon="appendIcon"
                           v-on:click="switchAppend"></el-button>
              </el-input>
            </div>
            <div v-if="showAdvance"
                 id="advance"
                 style="padding: 10px; float: right;">
              <div>
                <div style="margin-top: 20px; display: flex;">
                  <div class="advancedSearchLabel">操作人</div>
                  <div style="width: 217px">
                    <el-input v-model="updatedBy"
                              placeholder="请输入操作人"></el-input>
                  </div>
                </div>
              </div>
              <div>
                <div style="margin-top: 10px; display: flex;">
                  <div class="advancedSearchLabel">删除日期</div>
                  <div>
                    <el-date-picker
                      v-model="updatedTime"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      style="width: 240px;"
                      type="daterange" value-format=" yyyy-MM-dd"
                      @change="dateChange">
                    </el-date-picker>
                  </div>
                </div>
              </div>
              <div style="margin-top: 30px; right: 10px;">
                <el-row>
                  <el-col :offset="6" :span="6">
                    <div style="margin-left: 90px;height: 32px; width: 88px;">
                      <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
                    </div>
                  </el-col>
                  <el-col :offset="2" :span="2">
                    <div style="margin-left: 30px;height: 32px; width: 88px;">
                      <el-button size="small" v-on:click="reset">重置</el-button>
                    </div>
                  </el-col>
                  <el-col :offset="2" :span="2">
                    <div div style="margin-left: 30px;height: 32px; width: 88px;">
                      <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-table ref="table" :data="recycleTableData" :height="tableHeight" :row-key="getRowkeys" border border
                highlight-current-row
                stripe style="width: 100%;"
                @selection-change="handleSelectionChange">
        <el-table-column
          v-model="multipleSelection"
          :reserve-selection="true"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column label="公式名称" min-width="320" prop="formulaName">
          <template slot-scope="scope">
            <span v-html="scope.row.formulaName"></span>
          </template>
        </el-table-column>
        <el-table-column label="版本号" min-width="60" prop="version"></el-table-column>
        <el-table-column label="操作人" min-width="140" prop="updatedBy"></el-table-column>
        <el-table-column label="删除时间" min-width="160" prop="updatedTime"></el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <span><el-link type="primary" @click.prevent="showPreviewDialog(scope.row.id)">详情</el-link></span>
            <span><el-link type="primary" @click.prevent="recover(scope.row.id)">恢复</el-link></span>
            <span><el-link type="danger" @click.prevent="thoroughDel(scope.row.id)">彻底删除</el-link></span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination v-if="multiplePages" :page-size="pageSize" :total="totalNum" background
                     layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 5px;"
                     @current-change="handleCurrentChange"></el-pagination>
    </el-row>
  </div>
</template>
<script>
import PreviewDialog from "./exportModel/PreviewDialog";

export default {
  name: "CalculatorRecycle",
  components: {
    PreviewDialog
  },
  data() {
    return {
      previewDialogVisible: false,
      medicalCalculatorData: [],
      calculatorSore: [],
      describeContent: '',
      fields: [],
      cntFormulaType: 1,

      recycleTableData: [],
      totalNum: 0,
      currentPage: 0, // 第几页
      pageSize: 10, // 每页显示的数据个数
      multiplePages: true,
      tableHeight: '',
      appendIcon: "el-icon-caret-bottom",
      showAdvance: false,
      updatedTime: '',
      name: '',
      updatedBy: '',
      multipleSelection: [],
      multipleSelectionAll: [],
    }
  },
  methods: {
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      this.getTableData();
    },
    queryDetail: function (id) {

    },
    goBack: function () {
      this.$router.back()
    },
    recover: function (id) {
      this.recoverKnowledge(id, "是否恢复");
    },
    recoveryKnowledge: function () {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请最少选中一条公式");
        return;
      }
      this.recoverKnowledge(this.multipleSelection.toString(), "是否恢复被选中公式？");
    },
    recoverKnowledge: function (val, tips) {
      this.$confirm(tips, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          let param = new URLSearchParams();
          param.append("ids", val)
          this.axios.post('/pmph/action/medicalCalculator/recoverReleaseCalc', param).then(() => {
            this.getTableData()
          })
        }
      )
    },
    getTableData: function () {
      this.axios.get('/pmph/action/medicalCalculator/selectRecycleData', {
        params: {
          currentPage: this.currentPage,
          pageNum: this.pageSize,
          name: this.name,
          updatedTime: this.updatedTime.toString(),
          updatedBy: this.updatedBy,
        }
      }).then((response) => {
        this.noData = response.data.total <= 0;
        this.recycleTableData = response.data.tableData;
        this.totalNum = response.data.totalNum;
      })
    }
    ,
    searchEnterFun(e) {
      const keyCode = window.event ? e.keyCode : e.which;
      console.log("回车搜索", keyCode, e);
      if (keyCode === 13) {
        this.currentPage = 0;
        this.getTableData();
      }
    }
    ,
    emptyTrash: function () {
      this.delKnowledge('', 'all', '此操作将彻底删除公式，操作不可逆，请确认是否要清空所有删除公式？');
    }
    ,
    thoroughDel: function (id) {
      this.delKnowledge(id, 'single', '您要彻底删除该公式？');
    },
    delKnowledge: function (val, operationType, tips) {
      this.$confirm(tips, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = new URLSearchParams();
        param.append("id", val)
        param.append("operationType", operationType)
        param.append("name", this.name)
        param.append("updatedTime", this.updatedTime.toString())
        param.append("updatedBy", this.updatedBy)

        this.axios.post('/pmph/action/medicalCalculator/delReleasedCalculator', param).then(() => {
          this.getTableData()
        })
      })
    }
    ,
    switchAppend: function () {
      if (this.showAdvance) {
        this.showAdvance = false;
        this.appendIcon = "el-icon-caret-bottom";
      } else {
        this.showAdvance = true;
        this.appendIcon = "el-icon-caret-top";
      }
    }
    ,
    advanceCancel: function () {
      this.showAdvance = false;
    },
    reset: function () {
      this.name = '';
      this.updatedTime = '';
      this.updatedBy = '';
      this.drugInfoLibCompany = '';
    },
    advanceConfirm: function () {
      this.currentPage = 0;
      this.showAdvance = false;
      this.getTableData();
    },
    dateChange(val) {
      this.updatedTime = val;
    },
    getRowkeys(row) {
      return row.id;
    },
    showPreviewDialog: function (id) {
      let that = this
      this.axios.get('/pmph/action/medicalCalculator/selectReleasedCalculatorById', {
        params: {
          id: id,
        }
      }).then((response) => {
        that.medicalCalculatorData = response.data.medicalCalculatorData
        that.calculatorSore = response.data.calculatorSore
        that.describeContent = response.data.describeContent
        if (!this.describeContent) {
          this.describeContent = '无'
        }
        that.fields = response.data.fields
        that.cntFormulaType = response.data.type
        this.previewDialogVisible = true
      }).catch((error) => {
        console.error(error)
        this.$message.error("获取计算器数据失败");
      });
    },
//复选框选中事件
    handleSelectionChange(selection) {
      for (let i = 0; i < selection.length; i++) {
        this.multipleSelection.push(selection[i].id)
      }
      console.log(this.multipleSelection.toString());
    }
  },

  mounted() {
    this.getTableData();
  }
  ,
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 160;
  }
}
</script>

<style scoped>

</style>
